<script lang="ts" setup>
import { useClipboard } from '@vueuse/core'
import { ElMessage } from 'element-plus'
import { ref } from 'vue'

const inputText = ref('')
const outputText = ref('')

const { copy } = useClipboard()

function processText() {
  if (!inputText.value.trim()) {
    ElMessage.warning('请输入需要处理的文本')
    return
  }

  // 处理逻辑：分割行 -> 去空格 -> 去重 -> 排序
  const lines = inputText.value.split('\n')
    .map(line => line.trim())
    .filter(line => line.length > 0)

  const uniqueLines = [...new Set(lines)]
  uniqueLines.sort()

  outputText.value = uniqueLines.join('\n')
}

function copyResult() {
  if (!outputText.value) {
    ElMessage.warning('没有可复制的内容')
    return
  }

  copy(outputText.value)
  ElMessage.success('已复制到剪贴板')
}
</script>

<template>
  <div class="p-4">
    <div class="flex flex-col space-y-4">
      <div>
        <textarea
          v-model="inputText"
          class="h-64 w-full border rounded p-2"
          placeholder="请输入需要去重的文本，每行一条"
        />
      </div>

      <button
        @click="processText"
        class="rounded bg-blue-500 px-4 py-2 text-white hover:bg-blue-600"
      >
        处理文本
      </button>

      <div v-if="outputText">
        <label class="mb-2 block">处理结果</label>
        <textarea
          v-model="outputText"
          class="h-64 w-full border rounded p-2"
          readonly
        />
        <button
          @click="copyResult"
          class="mt-2 rounded bg-green-500 px-4 py-2 text-white hover:bg-green-600"
        >
          复制结果
        </button>
      </div>
    </div>
  </div>
</template>

<style scoped>
/* 可以添加自定义样式 */
</style>
